<template>
  <div class="callSearch">
    <el-tabs v-model="activeTabName" type="card">
      <el-tab-pane label="来电查询" name="telephoneInquire">
        <call-up :transactor-list="transactorList" />
      </el-tab-pane>
      <el-tab-pane label="去电查询" name="callInquire">
        <call-back :transactor-list="transactorList" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import CallUp from './components/CallUp'
  import CallBack from './components/CallBack'
  import { queryTransactorList } from '@/api'

  export default {
    name: 'callSearch',
    components: {
      CallUp,
      CallBack
    },
    data() {
      return {
        activeTabName: 'telephoneInquire',
        transactorList: []
      }
    },
    created() {
      this.getTransactorList()
    },
    methods: {
      // 获取话务员列表
      async getTransactorList() {
        const res = await queryTransactorList({})
        this.transactorList = res.data
      }
    }
  }
</script>

<style scoped lang="scss">
.callSearch {
  /deep/.el-tabs__header {
    margin-bottom: 10px;
  }
  .app-page {
    /deep/.el-form-item {
      margin-bottom: 10px;
    }
  }
}
</style>
